<!-- 选择优惠券 -->
<script setup>
	import {
		ref,
		reactive,
		watch
	} from 'vue'
	import {
		onShow,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		qryCanUseApi
	} from '@/api/components/SelectCoupon.js'
	// props
	const props = defineProps({
		show: {
			type: Boolean,
			required: true
		},
		selectCouponRow: {
			type: Object,
			default: () => {}
		}
	})
	// emits
	const emit = defineEmits(['close', 'confirm'])

	// 数据
	const data = reactive({
		list: [],
		value: '',
		pageNo: 1, // 当前页码
		pageSize: 10, // 每页数量
		totalPages: 10, // 总页数
		status: 'loadmore',
	})

	// 关闭弹窗
	const close = () => {
		reset()
		emit('close')
	}
	// 还原初始数据
	const reset = () => {
		data.value = ''
	}




	const qryCanUseList = () => {
		qryCanUseApi({
			pageSize: data.pageSize,
			pageNum: data.pageNo,
			// status等于3是待使用  status等于4是已经使用，status等于5是已过期
			status: 3,
		}).then(res => {
			// data.list = res.data
			console.log('res', res);


			const list = res.data.filter((item) => {
				return (item.minAmount < props.selectCouponRow.price)
			})
			const total = res.total
			data.totalPages = Math.ceil(total / data.pageSize)
			data.pageNo === 1 ? data.list = list : data.list = [...data.list, ...list]
			data.pageNo++;
			data.status = data.pageNo >= data.totalPages ? 'nomore' : 'loadmore'
		})
	}


	// 监听parentData的变化
	watch(() => props.selectCouponRow, (newValue, oldValue) => {
		console.log(`parentData  changed from ${oldValue} to ${newValue}`);
		qryCanUseList()
	});

	const lower = (e) => {
		console.log("已经滚动到底部了")
		if (data.status !== 'loadmore') return
		qryCanUseList()
	}
	// 选择优惠券
	const selectCoupon = ref()
	const groupChange = (item) => {
		// console.log('itemceshi');
		console.log('item: ', item);
		selectCoupon.value = item
	}


	// 确认选择
	const sure = () => {
		emit('confirm', selectCoupon.value)
	}
</script>
<script>
	export default {
		options: {
			styleIsolation: "shared"
		},
	};
</script>
<template>
	<!-- 弹窗-选择优惠券 -->
	<up-popup :show="props.show" :closeable="true" :safeAreaInsetTop="true" @close="close" :round="10"
		:customStyle="{height:'1200rpx'}" bgColor="#F6F6F6">
		<view class="Coupon-module">
			<view class="title">
				<text>选择优惠券</text>
			</view>
			<scroll-view class="type_box" scroll-y="true" @scrolltolower="lower">
				<view class="cnt">
					<view class="list" style="height: 810rpx;">
						<up-radio-group v-model="data.value" iconPlacement="right" placement="column"
							inactiveColor="#D9D9D9" activeColor="#25D62E" @change="groupChange">
							<view v-for="(item,index) in data.list" :key="index" class="item">
								<view class="left">
									<image style="width: 108rpx; height: 110rpx;" src="/static/images/icons/coupon.png"
										mode="scaleToFill" />
									<view class="info">
										<view class="name">{{item.cpnName}}</view>
										<view class="time">有效期至：{{item.insEndTime}}</view>
									</view>
								</view>
								<view class="line-box">
									<view class="line">
									</view>
								</view>
								<view class="amount-box">
									<view class="amount">
										<text class="label">￥</text>
										<text class="value">{{item.disAmount}}</text>
									</view>
									<view class="tip">(满{{item.minAmount}}元可用)</view>
								</view>
								<view class="radio-box">
									<up-radio :label="''" :name="item">
									</up-radio>
								</view>
							</view>
						</up-radio-group>
					</view>

				</view>
			</scroll-view>
			<!-- 底部栏 -->
			<view class="bottom-bar">
				<view class="content">
					<up-button class="sure-btn" text="确认" type="primary" shape="circle" @click="sure"></up-button>

				</view>
			</view>
		</view>
	</up-popup>
</template>

<style lang="scss" scoped>
	.Coupon-module {
		padding-bottom: 128rpx;
		background-color: #F6F6F6;

		// 标题
		& .title {
			margin-top: 30rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #303133;
			text-align: center;
		}

		// 内容
		& .cnt {
			box-sizing: border-box;
			padding: 38rpx 44rpx;

			& .list {
				& .item {
					margin-bottom: 34rpx;
					position: relative;
					display: flex;
					align-items: center;
					background: #FFFFFF;
					border-radius: 12rpx;
					// overflow: hidden;
					width: 662rpx;

					&::before {
						content: "";
						position: absolute;
						left: 0;
						top: 0;
						width: 12rpx;
						height: 138rpx;
						background: linear-gradient(180deg, #23E72C 0%, #303133 100%);
					}

					& .left {
						margin-left: 32rpx;
						width: 482rpx;
						display: flex;
						align-items: center;

						& .info {
							margin-left: 12rpx;

							& .name {
								font-weight: 500;
								font-size: 28rpx;
								color: #303133;
							}

							& .time {
								margin-top: 4rpx;
								font-weight: 400;
								font-size: 20rpx;
								color: #838385;
							}
						}
					}

					& .line-box {
						padding: 0 14rpx;
						overflow: hidden;

						& .line {
							position: relative;
							height: 138rpx;
							width: 4rpx;
							background-image: linear-gradient(to bottom,
									#E0E0E0 0%,
									#E0E0E0 50%,
									transparent 50%);
							background-size: 4rpx 20rpx; //第一个值（40rpx）越大线条越长间隙越大
							background-repeat: repeat-y;
							opacity: 1;

							&::before {
								content: '';
								position: absolute;
								left: -13rpx;
								top: -13rpx;
								width: 26rpx;
								height: 26rpx;
								border-radius: 50%;
								background: #F6F6F6;
							}

							&::after {
								content: '';
								position: absolute;

								left: -13rpx;
								bottom: -13rpx;
								width: 26rpx;
								height: 26rpx;
								border-radius: 50%;
								background: #F6F6F6;
							}
						}
					}


					& .amount-box {
						width: 180rpx;
						text-align: center;

						& .amount {
							& .label {
								font-weight: 500;
								font-size: 32rpx;
								background: linear-gradient(90deg, #21FF2B 0%, #303133 100%);
								background-clip: text;
								-webkit-background-clip: text;
								-webkit-text-fill-color: transparent;
							}

							& .value {
								font-weight: 600;
								font-size: 56rpx;
								background: linear-gradient(90deg, #21FF2B 0%, #303133 100%);
								background-clip: text;
								-webkit-background-clip: text;
								-webkit-text-fill-color: transparent;
							}
						}

						& .tip {
							font-weight: 400;
							font-size: 20rpx;
							color: #838385;
						}
					}

					& .radio-box {
						width: 36rpx;
						height: 36rpx;
						position: absolute;
						right: -10rpx;
						top: -10rpx;

						&::v-deep .u-radio {
							margin: 0;
						}
					}
				}
			}
		}

		// 底部栏
		& .bottom-bar {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: 172rpx;
			background: #FFFFFF;
			border-top: 1rpx solid #E9E9EB;

			&::v-deep .content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 12rpx 40rpx;

				& .u-button {
					height: 88rpx;
					width: 620rpx;
					font-weight: 500;
					font-size: 32rpx;
					border-radius: 112rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					background: #303133;
				}
			}
		}

		// 赠送弹窗文字
		& .sure-give-modal {
			margin-top: 20rpx;

			& view {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				text-align: center;
			}
		}
	}
</style>